)

Fixes elastic#209317

## Summary

Summary of
[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)
discussion:

As shown below, we check if the `Create rule` button exists and then we
try to click it:
```
const clickCreateRuleButton = async () => {
    await testSubjects.existOrFail('createRuleButton');
    const createRuleButton = await testSubjects.find('createRuleButton');
    return await createRuleButton.click();
  };
```

It seems something goes wrong during click in this case and even after 2
mins, we don't see the modal:
```
[00:03:11]         │ debg --- retry.tryForTime error: [data-test-subj="ruleTypeModal"] is not displayed
...
[00:05:09]         └- ✖ fail: ObservabilityApp Custom threshold preview chart does render the empty chart only once at bootstrap
```

@dmlemeshko pointed to the implementation that we have for the button
and the fact that we need to first check if the user is authorized to
see this button, and something might have caused the click not to be
successful even though there is no error reported by WebDriver.

```
useEffect(() => {
    setHeaderActions?.([
      ...(authorizedToCreateAnyRules ? [<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),
      <RulesSettingsLink />,
      <RulesListDocLink />,
    ]);
  }, [authorizedToCreateAnyRules]);
```

Long story short, we will add waiting for the global spinner to
hopefully make this test less flaky 🤞🏻

---------

Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>
(cherry picked from commit 2f0bad7)

…) (#213778)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Attempt to fix custom_threshold_preview_chart flaky test
(#212028)](#212028)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Maryam
Saeidi","email":"maryam.saeidi@elastic.co"},"sourceCommit":{"committedDate":"2025-02-27T10:48:14Z","message":"Attempt
to fix custom_threshold_preview_chart flaky test (#212028)\n\nFixes
#209317\n\n## Summary\n\nSummary
of\n[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)\ndiscussion:\n\nAs
shown below, we check if the `Create rule` button exists and then
we\ntry to click it:\n```\nconst clickCreateRuleButton = async () => {\n
await testSubjects.existOrFail('createRuleButton');\n const
createRuleButton = await testSubjects.find('createRuleButton');\n return
await createRuleButton.click();\n };\n```\n\nIt seems something goes
wrong during click in this case and even after 2\nmins, we don't see the
modal:\n```\n[00:03:11] │ debg --- retry.tryForTime error:
[data-test-subj=\"ruleTypeModal\"] is not displayed\n...\n[00:05:09] └-
✖ fail: ObservabilityApp Custom threshold preview chart does render the
empty chart only once at bootstrap\n```\n\n@dmlemeshko pointed to the
implementation that we have for the button\nand the fact that we need to
first check if the user is authorized to\nsee this button, and something
might have caused the click not to be\nsuccessful even though there is
no error reported by WebDriver.\n\n```\nuseEffect(() => {\n
setHeaderActions?.([\n ...(authorizedToCreateAnyRules ?
[<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),\n
<RulesSettingsLink />,\n <RulesListDocLink />,\n ]);\n },
[authorizedToCreateAnyRules]);\n```\n\nLong story short, we will add
waiting for the global spinner to\nhopefully make this test less flaky
🤞🏻\n\n---------\n\nCo-authored-by: Dominique Clarke
<dominique.clarke@elastic.co>","sha":"2f0bad7d39319c315597be0e464b6d41fb4c25ef","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","ci:project-deploy-observability","backport:version","v9.1.0","v8.19.0"],"title":"Attempt
to fix custom_threshold_preview_chart flaky
test","number":212028,"url":"https://github.com/elastic/kibana/pull/212028","mergeCommit":{"message":"Attempt
to fix custom_threshold_preview_chart flaky test (#212028)\n\nFixes
#209317\n\n## Summary\n\nSummary
of\n[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)\ndiscussion:\n\nAs
shown below, we check if the `Create rule` button exists and then
we\ntry to click it:\n```\nconst clickCreateRuleButton = async () => {\n
await testSubjects.existOrFail('createRuleButton');\n const
createRuleButton = await testSubjects.find('createRuleButton');\n return
await createRuleButton.click();\n };\n```\n\nIt seems something goes
wrong during click in this case and even after 2\nmins, we don't see the
modal:\n```\n[00:03:11] │ debg --- retry.tryForTime error:
[data-test-subj=\"ruleTypeModal\"] is not displayed\n...\n[00:05:09] └-
✖ fail: ObservabilityApp Custom threshold preview chart does render the
empty chart only once at bootstrap\n```\n\n@dmlemeshko pointed to the
implementation that we have for the button\nand the fact that we need to
first check if the user is authorized to\nsee this button, and something
might have caused the click not to be\nsuccessful even though there is
no error reported by WebDriver.\n\n```\nuseEffect(() => {\n
setHeaderActions?.([\n ...(authorizedToCreateAnyRules ?
[<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),\n
<RulesSettingsLink />,\n <RulesListDocLink />,\n ]);\n },
[authorizedToCreateAnyRules]);\n```\n\nLong story short, we will add
waiting for the global spinner to\nhopefully make this test less flaky
🤞🏻\n\n---------\n\nCo-authored-by: Dominique Clarke
<dominique.clarke@elastic.co>","sha":"2f0bad7d39319c315597be0e464b6d41fb4c25ef"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/212028","number":212028,"mergeCommit":{"message":"Attempt
to fix custom_threshold_preview_chart flaky test (#212028)\n\nFixes
#209317\n\n## Summary\n\nSummary
of\n[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)\ndiscussion:\n\nAs
shown below, we check if the `Create rule` button exists and then
we\ntry to click it:\n```\nconst clickCreateRuleButton = async () => {\n
await testSubjects.existOrFail('createRuleButton');\n const
createRuleButton = await testSubjects.find('createRuleButton');\n return
await createRuleButton.click();\n };\n```\n\nIt seems something goes
wrong during click in this case and even after 2\nmins, we don't see the
modal:\n```\n[00:03:11] │ debg --- retry.tryForTime error:
[data-test-subj=\"ruleTypeModal\"] is not displayed\n...\n[00:05:09] └-
✖ fail: ObservabilityApp Custom threshold preview chart does render the
empty chart only once at bootstrap\n```\n\n@dmlemeshko pointed to the
implementation that we have for the button\nand the fact that we need to
first check if the user is authorized to\nsee this button, and something
might have caused the click not to be\nsuccessful even though there is
no error reported by WebDriver.\n\n```\nuseEffect(() => {\n
setHeaderActions?.([\n ...(authorizedToCreateAnyRules ?
[<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),\n
<RulesSettingsLink />,\n <RulesListDocLink />,\n ]);\n },
[authorizedToCreateAnyRules]);\n```\n\nLong story short, we will add
waiting for the global spinner to\nhopefully make this test less flaky
🤞🏻\n\n---------\n\nCo-authored-by: Dominique Clarke
<dominique.clarke@elastic.co>","sha":"2f0bad7d39319c315597be0e464b6d41fb4c25ef"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Maryam Saeidi <maryam.saeidi@elastic.co>

)

Fixes elastic#209317

## Summary

Summary of
[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)
discussion:

As shown below, we check if the `Create rule` button exists and then we
try to click it:
```
const clickCreateRuleButton = async () => {
    await testSubjects.existOrFail('createRuleButton');
    const createRuleButton = await testSubjects.find('createRuleButton');
    return await createRuleButton.click();
  };
```

It seems something goes wrong during click in this case and even after 2
mins, we don't see the modal:
```
[00:03:11]         │ debg --- retry.tryForTime error: [data-test-subj="ruleTypeModal"] is not displayed
...
[00:05:09]         └- ✖ fail: ObservabilityApp Custom threshold preview chart does render the empty chart only once at bootstrap
```

@dmlemeshko pointed to the implementation that we have for the button
and the fact that we need to first check if the user is authorized to
see this button, and something might have caused the click not to be
successful even though there is no error reported by WebDriver.

```
useEffect(() => {
    setHeaderActions?.([
      ...(authorizedToCreateAnyRules ? [<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),
      <RulesSettingsLink />,
      <RulesListDocLink />,
    ]);
  }, [authorizedToCreateAnyRules]);
```

Long story short, we will add waiting for the global spinner to
hopefully make this test less flaky 🤞🏻

---------

Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>

)

Fixes elastic#209317

## Summary

Summary of
[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)
discussion:

As shown below, we check if the `Create rule` button exists and then we
try to click it:
```
const clickCreateRuleButton = async () => {
    await testSubjects.existOrFail('createRuleButton');
    const createRuleButton = await testSubjects.find('createRuleButton');
    return await createRuleButton.click();
  };
```

It seems something goes wrong during click in this case and even after 2
mins, we don't see the modal:
```
[00:03:11]         │ debg --- retry.tryForTime error: [data-test-subj="ruleTypeModal"] is not displayed
...
[00:05:09]         └- ✖ fail: ObservabilityApp Custom threshold preview chart does render the empty chart only once at bootstrap
```

@dmlemeshko pointed to the implementation that we have for the button
and the fact that we need to first check if the user is authorized to
see this button, and something might have caused the click not to be
successful even though there is no error reported by WebDriver.

```
useEffect(() => {
    setHeaderActions?.([
      ...(authorizedToCreateAnyRules ? [<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),
      <RulesSettingsLink />,
      <RulesListDocLink />,
    ]);
  }, [authorizedToCreateAnyRules]);
```

Long story short, we will add waiting for the global spinner to
hopefully make this test less flaky 🤞🏻

---------

Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>
(cherry picked from commit 2f0bad7)

) (#225507)

# Backport

This will backport the following commits from `main` to `8.18`:
- [Attempt to fix custom_threshold_preview_chart flaky test
(#212028)](#212028)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Maryam
Saeidi","email":"maryam.saeidi@elastic.co"},"sourceCommit":{"committedDate":"2025-02-27T10:48:14Z","message":"Attempt
to fix custom_threshold_preview_chart flaky test (#212028)\n\nFixes
#209317\n\n## Summary\n\nSummary
of\n[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)\ndiscussion:\n\nAs
shown below, we check if the `Create rule` button exists and then
we\ntry to click it:\n```\nconst clickCreateRuleButton = async () => {\n
await testSubjects.existOrFail('createRuleButton');\n const
createRuleButton = await testSubjects.find('createRuleButton');\n return
await createRuleButton.click();\n };\n```\n\nIt seems something goes
wrong during click in this case and even after 2\nmins, we don't see the
modal:\n```\n[00:03:11] │ debg --- retry.tryForTime error:
[data-test-subj=\"ruleTypeModal\"] is not displayed\n...\n[00:05:09] └-
✖ fail: ObservabilityApp Custom threshold preview chart does render the
empty chart only once at bootstrap\n```\n\n@dmlemeshko pointed to the
implementation that we have for the button\nand the fact that we need to
first check if the user is authorized to\nsee this button, and something
might have caused the click not to be\nsuccessful even though there is
no error reported by WebDriver.\n\n```\nuseEffect(() => {\n
setHeaderActions?.([\n ...(authorizedToCreateAnyRules ?
[<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),\n
<RulesSettingsLink />,\n <RulesListDocLink />,\n ]);\n },
[authorizedToCreateAnyRules]);\n```\n\nLong story short, we will add
waiting for the global spinner to\nhopefully make this test less flaky
🤞🏻\n\n---------\n\nCo-authored-by: Dominique Clarke
<dominique.clarke@elastic.co>","sha":"2f0bad7d39319c315597be0e464b6d41fb4c25ef","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","ci:project-deploy-observability","backport:version","v9.1.0","v8.19.0","v8.18.4"],"title":"Attempt
to fix custom_threshold_preview_chart flaky
test","number":212028,"url":"https://github.com/elastic/kibana/pull/212028","mergeCommit":{"message":"Attempt
to fix custom_threshold_preview_chart flaky test (#212028)\n\nFixes
#209317\n\n## Summary\n\nSummary
of\n[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)\ndiscussion:\n\nAs
shown below, we check if the `Create rule` button exists and then
we\ntry to click it:\n```\nconst clickCreateRuleButton = async () => {\n
await testSubjects.existOrFail('createRuleButton');\n const
createRuleButton = await testSubjects.find('createRuleButton');\n return
await createRuleButton.click();\n };\n```\n\nIt seems something goes
wrong during click in this case and even after 2\nmins, we don't see the
modal:\n```\n[00:03:11] │ debg --- retry.tryForTime error:
[data-test-subj=\"ruleTypeModal\"] is not displayed\n...\n[00:05:09] └-
✖ fail: ObservabilityApp Custom threshold preview chart does render the
empty chart only once at bootstrap\n```\n\n@dmlemeshko pointed to the
implementation that we have for the button\nand the fact that we need to
first check if the user is authorized to\nsee this button, and something
might have caused the click not to be\nsuccessful even though there is
no error reported by WebDriver.\n\n```\nuseEffect(() => {\n
setHeaderActions?.([\n ...(authorizedToCreateAnyRules ?
[<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),\n
<RulesSettingsLink />,\n <RulesListDocLink />,\n ]);\n },
[authorizedToCreateAnyRules]);\n```\n\nLong story short, we will add
waiting for the global spinner to\nhopefully make this test less flaky
🤞🏻\n\n---------\n\nCo-authored-by: Dominique Clarke
<dominique.clarke@elastic.co>","sha":"2f0bad7d39319c315597be0e464b6d41fb4c25ef"}},"sourceBranch":"main","suggestedTargetBranches":["8.18"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/212028","number":212028,"mergeCommit":{"message":"Attempt
to fix custom_threshold_preview_chart flaky test (#212028)\n\nFixes
#209317\n\n## Summary\n\nSummary
of\n[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)\ndiscussion:\n\nAs
shown below, we check if the `Create rule` button exists and then
we\ntry to click it:\n```\nconst clickCreateRuleButton = async () => {\n
await testSubjects.existOrFail('createRuleButton');\n const
createRuleButton = await testSubjects.find('createRuleButton');\n return
await createRuleButton.click();\n };\n```\n\nIt seems something goes
wrong during click in this case and even after 2\nmins, we don't see the
modal:\n```\n[00:03:11] │ debg --- retry.tryForTime error:
[data-test-subj=\"ruleTypeModal\"] is not displayed\n...\n[00:05:09] └-
✖ fail: ObservabilityApp Custom threshold preview chart does render the
empty chart only once at bootstrap\n```\n\n@dmlemeshko pointed to the
implementation that we have for the button\nand the fact that we need to
first check if the user is authorized to\nsee this button, and something
might have caused the click not to be\nsuccessful even though there is
no error reported by WebDriver.\n\n```\nuseEffect(() => {\n
setHeaderActions?.([\n ...(authorizedToCreateAnyRules ?
[<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),\n
<RulesSettingsLink />,\n <RulesListDocLink />,\n ]);\n },
[authorizedToCreateAnyRules]);\n```\n\nLong story short, we will add
waiting for the global spinner to\nhopefully make this test less flaky
🤞🏻\n\n---------\n\nCo-authored-by: Dominique Clarke
<dominique.clarke@elastic.co>","sha":"2f0bad7d39319c315597be0e464b6d41fb4c25ef"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/213778","number":213778,"state":"MERGED","mergeCommit":{"sha":"66a2c1aa56c7ba2169b5d648b82672a95263a2eb","message":"[8.x]
Attempt to fix custom_threshold_preview_chart flaky test (#212028)
(#213778)\n\n# Backport\n\nThis will backport the following commits from
`main` to `8.x`:\n- [Attempt to fix custom_threshold_preview_chart flaky
test\n(#212028)](https://github.com/elastic/kibana/pull/212028)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Maryam Saeidi
<maryam.saeidi@elastic.co>"}},{"branch":"8.18","label":"v8.18.4","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Maryam Saeidi <maryam.saeidi@elastic.co>
Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>